Skip to main content

Component interaction

Parent to child​

הצהרה על המשתנה בקומפוננטה של ה-parent.

Parent ts file
public name = 'Dani';

שליחת המשתנה ל-child כשקוראים לקומפוננטה של ה-child לתוך משתנה parentData של ה-child.

Parent html file
<app-child [parentData]="name"></app-child>

קבלת הערך של המשתנה על ידי הגדרת המשתנה כ-Input ב-child.

Child ts file
@Input() public parentData;
// We can give parentData alias name
@Input(parentData) public name;

שימוש בערך שקבלנו ב-child בתוך הקומפוננטה של ה-child.

Child html file
<h2>Hello {{ parentData }}</h2>

דוגמא של filter​

תאור יש לנו קומפוננטה של מוצרים שמכיל גריד של מוצרים. אנחנו רוצים לשים קומפוננטה של פילטר למוצרים. לכל קטגוריה בפילטר יהיה את מספר המוצרים שיש בקטגוריה.

אנחנו צריכים להעביר מידע מקומפוננטת האב של המוצרים לקומפוננטת הילד של הפילטר.

Parent to child - Input​

נתחיל מחישוב של מספר המוצרים בקטגוריית החינם בקומפוננטת האב.

Parent ts file
getTotalFreeCourse(){
    return this.courses.filter(course => course.type == 'free').length;
}

בקומפוננטת האב, נקרא לקומפוננטת הבן שהיא הפילטר.

נעביר את הערך מחישוב הפונקציה למשתנה free של הבן.

Parent html file
<filter-app [free]="getTotalFreeCourse()]</filter-app>

בקומפוננטת הבן נגדיר את המשתנה שיכיל את הערך שקבלנו.

Child ts file
@Input() public free;

עכשיו אפשר להשתמש בערך בקומפוננטת הבן

Child html file
{{ free }}

Child to parent - Output​

בכיוון השני אנחנו רוצים להעביר את הערך שנבחר בפילטר לקומפוננטה של המוצרים כדי להציג רק את המוצרים שנבחרו.

בקומפוננטת הבן, הפילטר, נגדיר משתנה שיחזיק את הבחירה של הגולש.

Child ts file
selectedRadioButtonValue: string = 'all';

נגדיר גם פונציה שתפעיל טריגר של אירוע. האירוע יופעל כשתהיה בחירה בקטגוריה.

Child ts file
selectedRadioButtonValue: string = 'all';

@Output()
filterButtonSelectChange: EventEmitter<string> = new EventEmitter<string>();

onButtonSelectedChange(){
    this.filterButtonSelectChange.emit(this.selectedRadioButtonValue);
}

בקובץ ה-html נפעיל את הטריגר.

Child html file
<input type="radio" value="all" [(ngModel)]="selectedRadioButtonValue" (change)="onButtonSelectedChange">

צריך לייבא את מודל הטפסים ל-app.

בקומפוננטת האב נגדיר משתנה שיקבל את הבחירה של המשתמש ונגדיר פונקציה שתופעל כשהאירוע עולה מקומפוננטת הבן.

Parent ts file
courseRadioSelectedFilter: string = "all";

onFilterRadioChanged(data: string){
    this.courseRadioSelectedFilter = data;
}

בקומפוננטת ההורה נחבר את הפונקציה כשקוראים לקומפוננטת הפילטר של הבן

Parent html file
<filter-app [free]="getTotalFreeCourse()" (filterButtonSelectChange)="onFilterRadioChanged($event)"></filter-app>

עכשיו אפשר לפלטר את המוצרים בקומפוננטת האב. אם אנחנו משתמשים ב-ngFor כדי לייצר את המוצרים, אי אפשר להשתמש ב-ngIf על אותו אלמנט html. נזיז החוצה את ה-for.

Parent html file
<ng-container *ngFor="let course of courses">
    <div class="course-container" *ngIf="courseRadioSelectedFilter === 'all' || courseRadioSelectedFilter === course.type">
        ...
    </div>
</ng-container>

Child to parent​

העברת מידע מהילד להורה על ידי אירוע.

הגדרת משתנה האירוע בילד ואת הפונקציה שמטפלת באירוע.

Child ts file
@Output() public childEvent = new EventEmitter();

fireEvent(){
    this.childEvent.emit("Welcome to the class");
}

הפעלת הטריגר של האירוע בתבנית הילד

Child html file
<button (click)="fireEvent()">Send Event</button>

הגדרת משתנה שיקבל את הערך בהורה.

Parent ts file
public message = "";

קבלת האירוע של הילד בקריאה לקומפוננטה של הילד ושימוש בערך המשתנה

Parent html file
<app-child (childEvent)="message=$event"></app-child>
<h2>{{ message }}</h2>

דוגמא של חיפוש​

קומפוננטת האב מכירה מוצרים, קומפוננטת הבן היא קומפוננטת החיפוש.

Child to parent​

הגדרת המשתנה שיחזיק את מילת החיפוש, יצירת האירוע שיחזיק את השינוי במילת החיפוש של הילד.

יצירת הפונקציה שמפעילה את האירוע.

Child search.ts
enteredSearchValue: string = '';
@Output()
  searchTextChanged: EventEmitter<string> = new EventEmitter<string>();

onSearchTextChange(){
    this.searchTextChanged.emit(this.enteredSearchValue);
}

נפעיל את האירוע כשהמשתמש יקליד ערך לחיפוש

Child search.html
<div class="search-container">
  <span>Search: </span>
  <input type="text" [(ngModel)]="enteredSearchValue" (input)="onSearchTextChange()">
</div>

בקומפוננטת האב נגדיר משתנה לקבל את הערך שזרק האירוע.

Parent products.ts
searchText: string = '';

onSearchTextEntered(searchValue: string){
    this.searchText = searchValue;
}

נקרא לקומפוננטת הבן ונקבל את האירוע ממנה, נשתמש בערך שנכנס למחרוזת החיפוש על מנת לסנן את התוצאות שאנחנו מציגים.

Parent products.html
<app-search (searchTextChanged)="onSearchTextEntered($event)"></app-search>

<ng-container *ngFor="let product of products">
  <div class="product-container" *ngIf="searchText === '' || product.name.toLowerCase().includes(searchText)">

  </div>
</ng-container>